Tiny File Manager | custom-drawings.html

Back Back Up Advanced Editor

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <link rel="stylesheet" href="../fonts/fonts.css">
    <script src="../gauge.min.js"></script>
</head>
<body style="background: #222">

<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>
<input type="text" id="gauge-size" value="400">
<button onclick="resize()">Resize</button>
<button onclick="updateUnits()">Change units</button>

<hr>

var timers = [];

function stopGaugesAnimation() {
    timers.forEach(function(timer) {
        clearInterval(timer);
    });
}

function resize() {
    var size = parseFloat(document.getElementById('gauge-size').value) || 400;

document.gauges.forEach(function (gauge) {
        gauge.update({ width: size, height: size });
    });
}

function updateUnits() {
    document.gauges.forEach(function (gauge) {
        gauge.update({ units: 'Miles' });
    });
}

function setText() {
    var text = document.getElementById('gauge-text').value;

document.gauges.forEach(function (gauge) {
        gauge.update({ valueText: text });
    });
}

window.onload = function() {
    // refer gauge
    var gauge = document.gauges[0];

// this will draw red or blue circle on a gauge plate depending on
    // current value
    gauge.on('beforeNeedle', function () {
        // getting canvas 2d drawing context
        var context = this.canvas.context;

// we can use gauge context special 'max' property which represents
        // gauge radius in a real pixels and calculate size of relative pixel
        // for our drawing needs
        var pixel = context.max / 100;

// step out our circle center coordinate by 30% of its radius from
        // gauge center
        var centerX = 30 * pixel;

// stay in center by Y-coordinate
        var centerY = 0;

// use circle radius equal to 5%
        var radius = 5 * pixel;

// save previous context state
        context.save();

// draw circle using canvas JS API
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

var gradient = context.createRadialGradient(
            centerX, centerY, 0,
            centerX, centerY, radius);
        gradient.addColorStop(0, this.options.value <= 0 ? '#aaf' : '#faa');
        gradient.addColorStop(0.82, this.options.value <= 0 ? '#00f' : '#f00');
        gradient.addColorStop(1, this.options.value <= 0 ? '#88a' : '#a88');

context.fillStyle = gradient;
        context.fill();
        context.closePath();

// restore previous context state to prevent break of
        // further drawings
        context.restore();
    });

// redraw the gauge if it has been already drawn
    gauge.draw();
}
</script>
</body>
</html>